<template>
  <div>
    <div>【云端报警风险】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

const target = ref(null)
let myChart = null
const render = () => {
  const option = {
    grid: {
      top: 0,
      left: 0,
      rigtht: 0,
      bottom: 0,
      containLabel: true
    },
    radar: {
      startAngle: 120,
      axisLine: {
        lineStyle: {
          color: 'rgba(5, 213, 255, .8)'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: 'rgba(5, 213, 255, .8)' // 设置网格的颜色
        }
      },
      indicator: props.data.risks.map((item) => {
        return {
          name: item.name,
          max: 100
        }
      })
    },
    series: {
      type: 'radar',
      data: [
        {
          value: props.data.risks.map((item) => item.value)
        }
      ],
      areaStyle: {
        color: '#05D5FF',
        opacity: 0.5
      },
      label: {
        normal: {
          show: true,
          formatter: (params) => {
            return params.value
          },
          color: '#fff'
        }
      }
    }
  }
  myChart.setOption(option)
}
onMounted(() => {
  myChart = echarts.init(target.value)
  render()
})
watch(
  () => props.data,
  (newValue) => {
    render()
  }
)
</script>
